<style>
	html,body{
		overflow-x:hidden;
	}
	/*下一页*/
	.next-transition,
	.back-transition{
	    -webkit-transition:all .4s ease;
	    transition:all .4s ease;
	}
	.next-enter{
	    opacity: 0;
	    -webkit-transform: translate3d(20%, 0, 0);
	    transform: translate3d(20%, 0, 0);
	    background:red;
	}
	.next-leave {
	    -webkit-transform: translate3d(-60%, 0, 0);
	    transform: translate3d(-60%, 0, 0);
	    opacity:0;
	    background:#ddd;
	}
	/*back*/
	.back-enter{
	    opacity: 0;
	    -webkit-transform: translate3d(-20%, 0, 0);
	    transform: translate3d(-20%, 0, 0);
	}
	.back-leave {
	    -webkit-transform: translate3d(60%, 0, 0);
	    transform: translate3d(60%, 0, 0);
	    background:red;
	    opacity:0;
	}
</style>
<template>
	<app-header></app-header>
	<!--路由-->
	<router-view :transition="animate" transition-mode="out-in"></router-view>
</template>
<script>
	export default{
		data:function(){
			return {
				animate:"next"
			}
		},
		methods:{
			al:function(){
				alert("我是第一个app");
			}
		},
		components:{
			appHeader:require("./header.vue")
		}
	}
</script>